import React from 'react'
import axios from 'axios'
import {useState,useEffect} from "react"

function App() {
  // 思路是要有一份原始数据不能改变，因为要用arr来搜锁，不能让arr为空数组
  let [arr,setArr] = useState([]) // 始终不改变
  let [arr1,setArr1] = useState([]) // 列表里渲染arr1
  let [val,setVal] = useState("")
  useEffect(()=>{
      axios.get("/list").then(res=>{
          setArr(res.data)
          setArr1(res.data)
      })
  },[])
  let searchfn = ()=>{
   
    //    console.log(newval);
  }
  let changefn = (e)=>{
    console.log(arr)
    console.log(e.target.value);
    let searchval = e.target.value
    if (searchval) {
      let aaa =   arr.filter(item=>{
            return item.name.includes(searchval)
        })
        setArr1(aaa)
     
    } else {
        setArr1(arr)
    }

    //   setVal(e.target.value)
    //   let newval = arr.filter((item)=>{
    //       if (e.target.value) {
    //         return item.name.includes(e.target.value)
    //       } else {
    //           return null
    //       }
       
    //     }
    // )
    
  
   

  }
  return (
    <div>
        {/* <input type="text" defaultValue={val} onChange={changefn} /> <button onClick={searchfn}>点击</button> */}
        {
            arr1 && arr1.length? arr1.map((item,index)=>{
                return <div key={index}>
                    <h4>{item.name}</h4>
                    <img src={item.img} alt="" />
                </div>
            }):"暂无数据"
        }
    </div>
  )
}

export default App